<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="21">
        <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">借款审核</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">审核状态</p>
          </template>
          <el-descriptions-item label="贷款编号">
            <span v-text="info.orderNum" />
          </el-descriptions-item>
          <el-descriptions-item label="当前进度">
            <dict-tag :options="dict.type.loan_info_applicant_status" :value="info.applicantStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="操作员">
            <span v-text="info.userName" />
          </el-descriptions-item>
          <el-descriptions-item label="初审意见">
            <span v-text="info.auditIdea" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="申请信息" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">申请信息</p>
          </template>
          <el-descriptions-item label="申请产品">
            <span v-text="info.productionName" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="渠道">
            <span v-text="info.channelName" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="期数">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="转换天数">
            <span v-text="info.periods*30" />
          </el-descriptions-item>
          <el-descriptions-item label="综合利率">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="借款利率">
            <span v-text="(info.monRate*100).toFixed(1)" />%
          </el-descriptions-item>
          <el-descriptions-item label="罚息计算方式">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="居间服务费">
            <span v-text="(info.servCharge*100).toFixed(1)" />%
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="借款信息" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">借款信息</p>
          </template>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="分期期数">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款用途">
            <span v-text="info.usage" />
          </el-descriptions-item>
          <el-descriptions-item label="还款来源">
            <span v-text="info.paybackOrigin" />
          </el-descriptions-item>
          <el-descriptions-item label="还款保障">
            <span v-text="info.paybackGuarantee" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div v-for="(one, index) in allData" :key="index">
          <el-descriptions v-if="one.title !== '车辆信息' && one.title !== '房产信息'&& one.title !== '借款信息'&& one.title !== '申请信息'" :title="one.title" name="1" size="medium" :column="3" class="con">
            <template slot="title">
              <p class="title">{{ one.title }}</p>
            </template>
            <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1" :label="oneone.fieldName">
              <div v-if="oneone.fieldType != 'pictrue'">
                <span v-text="oneone.value" />
              </div>
              <div v-else-if="oneone.fieldType == 'pictrue'">
                <el-image
                  style="width: 160px; height: 90px"
                  :src="require('@/views/production/collaborativeProduct/1561390725417.jpeg')"
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <hr v-if="one.title !== '车辆信息' && one.title !== '房产信息'&& one.title !== '借款信息'&& one.title !== '申请信息'">
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con" direction="vertical" border>
          <template slot="title">
            <p class="title">附件信息</p>
          </template>
          <el-descriptions-item label="序号">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="附件名">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <span />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">历史进件</p>
          <el-descriptions title="身份证相同，手机号不同的历史进件" name="1" size="medium" :column="7" class="con" direction="vertical" border>
            <el-descriptions-item label="申请日期">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="授信额度（元）">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="放款订单状态">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="还款进度">
              <span />
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="该手机号的历史进件" name="1" size="medium" :column="7" class="con" direction="vertical" border>
            <el-descriptions-item label="申请日期">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="授信额度（元）">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="放款订单状态">
              <span />
            </el-descriptions-item>
            <el-descriptions-item label="还款进度">
              <span />
            </el-descriptions-item>
          </el-descriptions>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con" direction="vertical" border>
          <template slot="title">
            <p class="title">授信纪录</p>
          </template>
          <el-descriptions-item label="操作人">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="内容">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="时间">
            <span />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con" direction="vertical" border>
          <template slot="title">
            <p class="title">修改纪录</p>
          </template>
          <el-descriptions-item label="操作人">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="修改内容">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="修改时间">
            <span />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row justify="center" type="flex">
      <el-col :span="6" :offset="18">
        <el-button type="primary" @click="firstTrial">进件初审</el-button>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="审核结果：" prop="dictName">
          <el-select v-model="form.auditResult" placeholder="请选择" clearable style="width: 360px;">
            <el-option
              v-for="dict in dict.type.loan_info_audit_result"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见：" prop="remark">
          <el-input v-model="form.auditIdea" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { newViewDetails } from '@/api/viewDetails'
import { UpdateFirstTrial, FindFirstTrialById } from '@/api/firstTrial'
export default {
  name: 'FirstTrialDetail',
  dicts: ['loan_info_payment_method', 'loan_info_audit_result', 'loan_info_applicant_status'],
  data() {
    return {
      loading: true,
      open: false,
      title: '',
      form: [
        { id: undefined,
          auditIdea: undefined,
          auditResult: undefined,
          status: '0'
        }],
      info: [
      ],
      id: undefined,
      allData: [
        {
          title: '',
          data: []
        }
      ],
      activeNames: ['1']
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id
    this.getList(this.id)
  },
  methods: {
    getList(id) {
      newViewDetails(id).then(res => {
        this.allData = res.data
        console.log(this.allData)
      }).catch()
      FindFirstTrialById(id).then(res => {
        this.info = res.data
        console.log(this.info)
      }).catch()
    },
    firstTrial() {
      this.reset()
      this.open = true
      this.title = '进行初审'
    },
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {
        id: undefined,
        auditIdea: undefined,
        auditResult: undefined,
        status: '0'
      }
      this.resetForm('form')
    },
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.id = this.$route.params && this.$route.params.id
          if (this.form.id !== undefined) {
            UpdateFirstTrial(this.form).then(response => {
              this.$modal.msgSuccess('成功')
              this.open = false
              this.$router.go(-1)
              this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
              this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
            })
          }
        }
      })
    }
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle{
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

 .title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
}
.secondTitle{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
  background-color: aqua;
  height: 35px;
}
.con{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}
</style>
